<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东柏瑞设计官网</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./bootstrap/reset-global.css">
    <link rel="stylesheet" href="./bootstrap/website.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="stylesheet" href="./swiper/swiper.min.css">
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <link rel="stylesheet" href="./css/xiongqingone.css">
    <script src="./jquery/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="box">
        <!-- 头部logo的div -->
        <div id="top">
            <div>
                <img src="./img/logo.png" alt="顶部logo">
            </div>
            <div class="more">
                <img src="./img/more.png" alt="更多" id="eye">
            </div>
            <div class="Telephone"><img src="./img/Telephone.png" alt="联系电话18317093686">
                <span>咨询我们:</span> 18317093686
            </div>
            <!-- 缩小后的点击导航栏 -->
            <div id="zoe">
                <div><a href="./index.html">首页</a></div>
                <div><a href="./wzkf.html">网站开发</a></div>
                <div><a href="./makapp.html">APP开发</a></div>
                <div class="color_nav"><a href="./xcxkf.html">小程序开发</a></div>
                <div><a href="./anli.html">案例</a></div>
                <div><a href="./about-us.html">关于我们</a></div>
            </div>
        </div>

        <!-- nav导航栏 -->
        <div
            class="container d-flex justify-content-between align-items-center nav-container flex-wrap hezoe nav-position nav_width">
            <nav class="main--nav w-100">
                <ul class="d-flex justify-content-between">
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./wzkf.html">网站开发</a></li>
                    <li><a href="./makapp.html">APP开发</a></li>
                    <li><a href="./xcxkf.html">小程序开发</a></li>
                    <li class="active-link"><a href="./anli.html">案例</a></li>
                    <li><a href="./about-us.html">关于我们</a></li>
                </ul>
            </nav>
        </div>
        <!-- 轮播区域 -->
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="./img/tu4.png" class="d-block w-100" alt="...">
                </div>
            </div>
        </div>
    </div>
    <div>
        <!-- 面包导航 -->
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="bread">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="./index.html" style="text-decoration: none;color: #666666;">首页</a>
                </li>
                <li class=" breadcrumb-item"><a href="./anli.html" style="text-decoration: none;color: #666666;">案例</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">详情</li>
            </ol>
        </nav>
    </div>
    <div style="width: 70%;margin: 0 auto;">
        <!-- <p style="margin: 2% 0;">首页 > 案例 > 详情</p> -->

        <!-- 主体 -->
        <div class="body_block">
            <p>中国风背景设计图</p>
            <img src="./img/xqfour.png" alt="">
            <div class="hui">精准拓客App、详情：类似于转转、咸鱼APP、出售手机号、购买靓号APP，地区区域定位、运营商、展示委托交易信息、供应商、手机号套餐、业务、（实名开卡）、出售价格等。</div>
        </div>
        <p style="margin: 2% 0;">热门相似作品:</p>
        <!-- 轮播 -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>APP登录页面</p>
                </div>
                <div class="swiper-slide"><img src="./img/t9.png" alt="">
                    <p class="appFont"><span>案例</span>中国风背景设计图</p>
                </div>
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>掌金优选</p>
                </div>
                <div class="swiper-slide"><img src="./img/t9.png" alt="">
                    <p class="appFont"><span>案例</span>果树网站</p>
                </div>
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>儿童教育</p>
                </div>
                <div class="swiper-slide"><img src="./img/t9.png" alt="">
                    <p class="appFont"><span>案例</span>APP登录页面</p>
                </div>
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>中国风背景设计图</p>
                </div>
                <div class="swiper-slide"><img src="./img/t9.png" alt="">
                    <p class="appFont"><span>案例</span>掌金优选</p>
                </div>
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>果树网站</p>
                </div>
            </div>
        </div>
        <div class="swiper mySwipers">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>APP登录页面</p>
                </div>
                <div class="swiper-slide"><img src="./img/t9.png" alt="">
                    <p class="appFont"><span>案例</span>中国风背景设计图</p>
                </div>
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>掌金优选</p>
                </div>
                <div class="swiper-slide"><img src="./img/t9.png" alt="">
                    <p class="appFont"><span>案例</span>果树网站</p>
                </div>
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>儿童教育</p>
                </div>
                <div class="swiper-slide"><img src="./img/t9.png" alt="">
                    <p class="appFont"><span>案例</span>APP登录页面</p>
                </div>
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>中国风背景设计图</p>
                </div>
                <div class="swiper-slide"><img src="./img/t9.png" alt="">
                    <p class="appFont"><span>案例</span>掌金优选</p>
                </div>
                <div class="swiper-slide"><img src="./img/t8.png" alt="">
                    <p class="appFont"><span>案例</span>果树网站</p>
                </div>
            </div>
        </div>
    </div>

    <!-- foot部分 -->
    <div class="footer">
        <div class="footTop">
            <div class="footBig">
                <div class="left">
                    <p>山东柏瑞设计有限公司</p>
                    <p>联系电话:18317093686</p>
                    <p>地址:济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南）</p>
                </div>
                <div class="right">
                    <img src="./img/2vm.png" alt="">
                    <p>微信公众号</p>
                </div>
            </div>
        </div>
        <div class="footFoot">Shandong Bairui Design Co., Ltd 山东柏瑞设计有限公司版权所有 鲁ICP备2021028094号-1</div>
    </div>
    <div class="foots">
        <p>山东柏瑞设计有限公司</p>
        <p>联系电话:18317093686</p>
        <p>地址:济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南）</p>
        <img src="./img/2vm.png" alt="">
    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./bootstrap/bootstrap.bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 4,
            spaceBetween: 50,
            freeMode: true,
            speed: 2000,
            autoplay: true,
            autoplay: {
                delay: 500
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
        swiper.el.onmouseover = function () {
            swiper.autoplay.stop();
        }
        swiper.el.onmouseleave = function () {
            swiper.autoplay.start();
        }
        var swiper = new Swiper(".mySwipers", {
            slidesPerView: 2.5,
            spaceBetween: 30,
            freeMode: true,
            speed: 2000,
            autoplay: true,
            autoplay: {
                delay: 1000
            },
            pagination: {
                el: ".swiper-paginations",
                clickable: true,
            },
        });
        swiper.el.onmouseover = function () {
            swiper.autoplay.stop();
        }
        swiper.el.onmouseleave = function () {
            swiper.autoplay.start();
        }
    </script>
</body>

</html>